<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>TODO supply a title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </h:head>
    <h:body>
        <h:form> 
            <div class="row" style="margin-top: 20px; margin-right: 10px">
                <ui:repeat value="#{paginationPost.postList}" var="post" id="postList">
                    <div class="row" style="margin-top: 5px; border-bottom: 1px dashed #cccccc">
                        <div class="col-md-2">
                            <img src="#{application.contextPath}/resources/#{post.category.imagePath}" style="border: 1px solid #cccccc"
                                 width="130px" height="130px" alt=""/>
                        </div>
                        <div class="col-md-10">
                            <h:commandLink value="#{post.title}" action="#" actionListener="#{postManagement.addViewer(post)}" 
                                           style="font-weight: bold;"/><br/>
                            <p style="font-size: small; color: #999999"><span>Được tạo bởi </span><h:commandLink action="#" value="#{post.user.userName}" />, 
                                <span>ngày </span>
                                <h:outputLabel value="#{post.updateDate}" style="font-size: small">
                                    <f:convertDateTime pattern="dd-MM-yyyy"/>
                                </h:outputLabel></p>
                            <p style="text-align: justify">#{post.content.subSequence(0, post.content.indexOf(" ",500))}...
                                <h:commandLink styleClass="label label-info" actionListener="#{postManagement.addViewer(post)}"
                                               action="#" value="Đọc tiếp" /></p>
                        </div>
                    </div>                    
                </ui:repeat>
            </div>
            <div class="row">
                <ul class="pagination">  
                    <li class="disabled"><h:link value="Page #{paginationPost.currentPage} / #{paginationPost.totalPages}" /> </li>
                    <li><h:commandLink value="First" action="#{paginationPost.pageFirst}"
                                       disabled="#{paginationPost.firstRow == 0}" /></li>
                    <li><h:commandLink value="«" action="#{paginationPost.pagePrevious}"
                                       disabled="#{paginationPost.firstRow == 0}" /></li>
                    <ui:repeat value="#{paginationPost.pages}" var="page">
                        <li class="#{page == paginationPost.currentPage?'active':''}">
                            <h:commandLink value="#{page}" actionListener="#{paginationPost.page}"
                                           disabled="#{page == paginationPost.currentPage}" />
                        </li>
                    </ui:repeat>

                    <li><h:commandLink value="»" action="#{paginationPost.pageNext}"
                                       disabled="#{paginationPost.firstRow + paginationPost.rowsPerPage &gt;= paginationPost.totalRows}" /></li>
                    <li><h:commandLink value="Last" action="#{paginationPost.pageLast}"
                                       disabled="#{paginationPost.firstRow + myBean.rowsPerPage &gt;= paginationPost.totalRows}" /></li>
                </ul>
            </div>
        </h:form>
    </h:body>
</html>
